<!--
 * @Date: 2021-09-07 09:56:46
 * @Author: 陶子
 * @LastEditTime: 2023-06-14 13:56:35
 * @FilePath: \jk_one-stop_pc\src\views\bigView\equipment\components\typeProportion.vue
 * @pageName: 这是--(设备类别占比)--组件
-->
<template>
  <div class="livenessRoot">
    <div class='topBox'>
      <div class="topTitle">
        <img src="~@/assets/img/screen-p1.png" alt="">
        设备类别占比
      </div>
    </div>
    <Echart :options="options" height="86%" width="100%"></Echart>
  </div>
</template>
<script>
import Echart from '@/common/echart'
export default {
  components: { Echart },
  props: ['proportionData'],
  data() {
    return {
      options: {},
      bgColor: 'transparent',
    }
  },
  watch: {
    proportionData: {
      handler(newVal, oldVal) {
        this.options = {
          color: ['#0D95FF', '#0DD4FF', '#FFDE00', '#FF943E'],
          backgroundColor: this.bgColor,
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
          },
          legend: {
            orient: 'horizontal',
            itemGap: 15,
            bottom: 0,
            textStyle: {
              color: '#f2f2f2',
              fontSize: 15,
            },
            icon: 'roundRect',
            data: newVal,
          },
          series: [
            // 主要展示层的
            {
              radius: ['41%', '58%'],
              center: ['50%', '45%'],
              type: 'pie',
              label: {
                padding: [0, -400, 0, 20],
                normal: {
                  show: true,
                  formatter: '{b}  {c}',
                  textStyle: {
                    fontSize: 16,
                  },
                  position: 'outside',
                },
                emphasis: {
                  show: true,
                },
              },
              labelLine: {
                normal: {
                  show: true,
                  length: 20,
                  length2: 15,
                },

                emphasis: {
                  show: true,
                },
              },
              name: '设备类别占比',
              data: newVal,
            },
            {
              name: '外边框',
              type: 'pie',
              clockWise: false, //顺时加载
              hoverAnimation: false, //鼠标移入变大
              center: ['50%', '45%'],
              radius: ['65%', '65%'],
              label: {
                normal: {
                  show: false,
                },
              },
              data: [
                {
                  value: 9,
                  name: '',
                  itemStyle: {
                    normal: {
                      borderWidth: 2,
                      borderColor: '#044d97',
                    },
                  },
                },
              ],
            },
          ],
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  methods: {},
}
</script> 

<style scoped lang='less'>
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.livenessRoot {
  width: 100%;
  height: 100%;
  .topBox {
    box-sizing: border-box;
    padding: 0.13rem 0.57rem 0 0;
    width: 100%;
    height: 0.65rem;
    .topTitle {
      font-size: 0.18rem;
      display: flex;
      align-items: center;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #FFFFFF;
      background: url('~@/assets/img/screen-p2.png') no-repeat;
      background-size: 100% 40%;
      background-position: left bottom;
      img {
        width: 0.53rem;
        height: 0.52rem;
      }
    }
  }
}
</style>